import QtQuick 2.12

Rectangle {
    id: rect
    visible: true
    width: 640
    height: 480

    MouseArea {
        anchors.fill: parent
        onClicked: {  // 鼠标单击
            rect.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1);

            // 访问 mouse 参数,mouse是clicked信号的参数
            console.log("Clicked mouse at", mouse.x, mouse.y)
        }
    }

    //绑定附加的信号,语法形式
    //<AttachingType>.<propertyName>
    //<AttachingType>.on<SignalName>

    //1.启用键盘处理，并且使用returnPressed的信号，回车键按下后，附加一段处理程序
    Keys.enabled: true
    Keys.onReturnPressed: {
        console.log("Enter pressed...")
    }

    //2.Component，它有一个 onCompleted 附加信号处理程序，通常用于在创建完成后执行某些 JavaScript 代码：
    //onCompleted 处理程序没有响应来自 Rectangle 类型的 completed 信号。
    //相反，Component 对象由 QML 引擎自动附加到 Rectangle 对象，当对象完全创建时，
    //引擎发出 completed 信号，从而触发 Component.onCompleted 信号处理程序
    Component.onCompleted: {
        console.log("The rectangle's color is", color)
    }


    //3.使用自定义的信号
    //语法如下
    //signal <name>[([<type> <parameter name>[, ...]])]

    //EpNavigationBar.qml文件中声明了两个信号，通过信号处理程序{...}在控制台打印输出
    EpNavigationBar{
        onClickBar: {
            console.log("clickBar")
        }

        onIndexChanged: {
            console.log("indexChanged:",index)
        }
    }
}
